﻿<!-- ASP.NET Web API Sample Application
   by Lee Dumond -- leedumond@gmail.com -->

<!DOCTYPE html>
<html>
   <head>
      <title>Create Contact</title>
      <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"> </script>
   </head>
   <body>
      <h1>Add Contact</h1>
      <form id="form1" method="post" action="/api/contacts/postcontact" enctype="application/x-www-form-urlencoded">
         <div>
            <label for="name">
               Name</label>
         </div>
         <div>
            <input name="name" type="text" />
         </div>
         <div>
            <label for="email">
               Email</label>
         </div>
         <div>
            <input name="email" type="text" />
         </div>
         <div>
            <label for="phone">
               Phone</label>
         </div>
         <div>
            <input name="phone" type="text" />
         </div>
         <p>
            <input type="submit" value="Create Contact" />
         </p>
      </form>
      <p id="result"></p>
      

      <script type="text/javascript">
         $("#form1").submit(function() {

            // send POST request containing form values via AJAX
            var jqxhr = $.post('/api/contacts/postcontact', $('#form1').serialize())
               .success(function() {
                  var loc = jqxhr.getResponseHeader('Location');
                  var a = $('<a/>', { href: loc, text: loc });
                  $('#result').html(a);
               })
               .error(function() {
                  $('#result').html("Error posting the update.");
               });

            return false;
         });
      </script>
      

   </body>
</html>